<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>财合税后台管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="${path}/css/font.css">
    <link rel="stylesheet" href="${path}/css/xadmin.css">
    <link rel="stylesheet" href="${path}/js/imgUp/css/common.css">
    <link rel="stylesheet" href="${path}/js/imgUp/css/index.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="${path}/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="${path}/js/xadmin.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        .staleConSelBox {
            position: relative;
            min-width: 190px;
            height: 36px;
            float: left;
            cursor: pointer;
            border: 1px solid #d2d2d2;
            border-radius: 0 2px 2px 0;
            background: #fff;
        }
        .staleConSelText {
            display: block;
            background: url("images/arrow.png") no-repeat 167px center;
            padding-right: 20px;
            line-height: 36px;
            padding-left: 10px;
        }
        .staleConSelUl {
            position: absolute;
            top:37px;
            left: 0px;
            border: 1px solid #eeeeee;
            background-color: #ffffff;
            display: none;
            z-index: 2;
            width: 100%;
        }
        .staleConSelUl li {
            position: relative;
            height: 36px;
            line-height: 36px;
            cursor: pointer;
            padding: 0 5px;
            color: #333;
        }
        .staleConSelUl li ul{
            width: 100%;
            left: 100%;
            top: 0;
            position: absolute;
            background: #fff;
            display: none;
            border: 1px solid #eee;
        }
        .sameDiv{
            float: left;
            width: 200px;
            height: 250px;
            border: 1px solid #009688;
            overflow-y: scroll;
        }
        .sameDiv li{
            padding: 5px 0 5px 10px;
            cursor: default;
        }
        .sameDiv .green{
            background: #009688;
        }
        .arrow{
            float: left;
            font-size: 50px;
            font-weight: bold;
            color: #009688;
            line-height: 250px;
            margin: 0 10px;
        }
        .collectCon{
            overflow: hidden;
            padding: 50px 0 0 30px;
            display: none;
        }
        .submit{
            display: none;
        }
        .collectCon h3{
            margin-bottom: 15px;
            font-size: 13px;
        }
    </style>
</head>

<body>
<div class="x-body">
    <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
        <ul class="layui-tab-title">
            <li class="layui-this">添加知识</li>
            <li class="">关联</li>
        </ul>
        <div class="layui-tab-content" style="height: 100px;">
            <div class="layui-tab-item layui-show">
                <form class="layui-form">
                    <div class="layui-form-item">
                        <label for="username" class="layui-form-label">
                            <span class="x-red">*</span>知识名称
                        </label>
                        <div class="layui-input-inline">
                            <input type="text" id="username" name="username" required="" lay-verify="required"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label for="username" class="layui-form-label">
                            <span class="x-red">*</span>知识类型
                        </label>
                        <div class="layui-input-inline">
                            <div class="staleConSelBox">
                                <span class="staleConSelText">知识类型<i class="layui-edge"></i></span>
                                <ul class="staleConSelUl">
                                    <li class="one">财务</li>
                                    <li class="one special">汇算
                                        <ul class="inUl">
                                            <li class="two">汇算2级01</li>
                                            <li class="two">汇算2级02</li>
                                        </ul>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><span class="x-red">*</span>所属专家</label>
                        <div class="layui-input-inline">
                            <div class="layui-unselect layui-form-select downpanel cs">
                                <div class="layui-select-title">
                                    <input id="expert" type="text" placeholder="请选择所属专家" value="" readonly="" class="layui-input layui-unselect"><i class="layui-edge"></i>
                                </div>
                                <dl class="layui-anim layui-anim-upbit" style="">
                                    <dd><input type="checkbox" name="brand" title="张专家" value="张专家" lay-skin="primary" ></dd>
                                    <dd><input type="checkbox" name="brand" title="李专家" value="李专家"  lay-skin="primary" ></dd>
                                    <dd><input type="checkbox" name="brand" title="王专家" value="王专家"  lay-skin="primary" ></dd>
                                    <dd><input type="checkbox" name="brand" title="刘专家" value="刘专家"  lay-skin="primary" ></dd>
                                </dl>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label for="username" class="layui-form-label">
                            <span class="x-red">*</span>知识图片
                        </label>
                        <div class="layui-input-inline">
                            <div class="img-box full" style="width: 800px;min-width: 800px;float: left;margin-top: 0">
                                <section class=" img-section">
                                    <div class="z_photo upimg-div clear" >
                                        <section class="z_file fl">
                                            <img src="${path}/js/imgUp/img/a11.png" class="add-img">
                                            <input type="file" name="file" id="file" class="file" value="" accept="image/jpg,image/jpeg,image/png,image/bmp" multiple />
                                        </section>
                                    </div>
                                </section>
                            </div>
                            <aside class="mask works-mask">
                                <div class="mask-content">
                                    <p class="del-p">您确定要删除作品图片吗？</p>
                                    <p class="check-p"><span class="del-com wsdel-ok">确定</span><span class="wsdel-no">取消</span></p>
                                </div>
                            </aside>
                        </div>
                    </div>
                    <div class="layui-form-item layui-form-text">
                        <label for="LAY_demo1" class="layui-form-label">
                            <span class="x-red">*</span>知识简介<br>（免费部分）
                        </label>
                        <div class="layui-input-block" style="width: 800px;float: left;margin-left: 0">
                            <textarea class="layui-textarea" id="LAY_demo1" style="display: none"></textarea>
                        </div>
                    </div>
                    <div class="layui-form-item layui-form-text">
                        <label for="LAY_demo2" class="layui-form-label">
                            <span class="x-red">*</span>知识简介<br>（收费部分）
                        </label>
                        <div class="layui-input-block" style="width: 800px;float: left;margin-left: 0">
                            <textarea class="layui-textarea" id="LAY_demo2" style="display: none"></textarea>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label  class="layui-form-label">
                        </label>
                        <button  class="layui-btn" lay-filter="add" lay-submit="">
                            提交
                        </button>
                    </div>
                </form>
            </div>
            <div class="layui-tab-item">
                <form class="layui-form">
                    <div class="layui-input-block" style="margin: 20px 0 0 30px">
                        <input class="collectRadio" type="radio" name="like1[write]" lay-skin="primary" title="按关键字关联（默认）" checked=""><div class="layui-unselect layui-form-radio layui-form-radioed"><i class="layui-anim layui-icon"></i><div>按关键字关联（默认）</div></div>
                        <input class="collectRadio" type="radio" name="like1[write]" lay-skin="primary" title="手动关联"><div class="layui-unselect layui-form-radio"><i class="layui-anim layui-icon"></i><div>手动关联</div></div>
                    </div>
                </form>
                <div class="collectCon">
                    <h3>关联的知识</h3>
                    <div class="left sameDiv">
                        <ul>
                            <li>课程1</li>
                            <li>课程2</li>
                            <li>课程3</li>
                        </ul>
                    </div>
                    <span class="arrow">→</span>
                    <div class="right sameDiv">
                        <ul></ul>
                    </div>
                </div>
                <div class="collectCon">
                    <h3>关联的服务</h3>
                    <div class="left sameDiv">
                        <ul>
                            <li>服务1</li>
                            <li>服务2</li>
                            <li>服务3</li>
                        </ul>
                    </div>
                    <span class="arrow">→</span>
                    <div class="right sameDiv">
                        <ul></ul>
                    </div>
                </div>
                <div class="layui-form-item submit">
                    <button class="layui-btn" lay-filter="add" lay-submit="" style="margin: 30px">
                        提交
                    </button>
                </div>
            </div>
        </div>
    </div>
    </form>
</div>
<script type="text/javascript" src="${path}/js/imgUp/js/imgup.js"></script>
<script>
    layui.use('layedit', function(){
        var layedit = layui.layedit
                ,$ = layui.jquery;

        //构建一个默认的编辑器
        var index = layedit.build('LAY_demo1');

        //编辑器外部操作
        var active = {
            content: function(){
                alert(layedit.getContent(index)); //获取编辑器内容
            }
            ,text: function(){
                alert(layedit.getText(index)); //获取编辑器纯文本内容
            }
            ,selection: function(){
                alert(layedit.getSelection(index));
            }
        };

        $('.site-demo-layedit').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        //自定义工具栏
        layedit.build('LAY_demo1', {
            tool: [ 'strong','italic','underline','strikeThrough','|','face', 'link','image', 'unlink', '|', 'left', 'center', 'right']
            ,height: 100
        })
    });
</script>
<script>
    layui.use('layedit', function(){
        var layedit = layui.layedit
                ,$ = layui.jquery;

        //构建一个默认的编辑器
        var index2 = layedit.build('LAY_demo2');

        //编辑器外部操作
        var active = {
            content: function(){
                alert(layedit.getContent(index2)); //获取编辑器内容
            }
            ,text: function(){
                alert(layedit.getText(index2)); //获取编辑器纯文本内容
            }
            ,selection: function(){
                alert(layedit.getSelection(index2));
            }
        };

        $('.site-demo-layedit').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        //自定义工具栏
        layedit.build('LAY_demo2', {
            tool: [ 'strong','italic','underline','strikeThrough','|','face', 'link','image', 'unlink', '|', 'left', 'center', 'right']
            ,height: 100
        })
    });
</script>
<script>
    layui.use(['form','layer','upload'], function(){
        $ = layui.jquery;
        var form = layui.form,
                upload = layui.upload,
                layer = layui.layer;
        form.render(); //刷新select选择框渲染
        //执行实例
        upload.render({
            elem: '.test'
            ,done: function(res, index, upload){
                //获取当前触发上传的元素，一般用于 elem 绑定 class 的情况，注意：此乃 layui 2.1.0 新增
                var item = this.item;
            }
        })

        /*var appServer = "";
         $("#file" ).takungaeImgup({
         formData: {
         "path": "artScene/",
         "name": "eee"
         },
         url: appServer + "/ajax/uploadPic.htm",
         success: function(data) {},
         error: function(err) {
         alert(err);
         }
         });*/

        function addComm(){
            jQuery.ajax({
                url: "/addComment.action",
                type: 'POST',
                data: {'imageUrls': imgUrls},
                dataType: 'json',
                success: function (data) {
                    alert("发布成功");
                }
            })
        }

        //自定义验证规则
        form.verify({
            nikename: function(value){
                if(value.length < 5){
                    return '昵称至少得5个字符啊';
                }
            }
            ,pass: [/(.+){6,12}$/, '密码必须6到12位']
            ,repass: function(value){
                if($('#L_pass').val()!=$('#L_repass').val()){
                    return '两次密码不一致';
                }
            }
        });

        //监听提交
        form.on('submit(add)', function(data){
            console.log(data);
            //发异步，把数据提交给php
            layer.alert("增加成功", {icon: 6},function () {
                // 获得frame索引
                var index = parent.layer.getFrameIndex(window.name);
                //关闭当前frame
                parent.layer.close(index);
            });
            return false;
        });

        layui.use('laydate', function(){
            var laydate = layui.laydate;

            //执行一个laydate实例
            laydate.render({
                elem: '#start', //指定元素
                type: 'datetime'//年 月 日 时 分 秒

            });
        });
    });
</script>
<script>var _hmt = _hmt || []; (function() {
    var hm = document.createElement("script");
    hm.src = "https://hm.baidu.com/hm.js?b393d153aeb26b46e9431fabaf0f6190";
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(hm, s);
})();</script>
<script>
    $(function(){

        //双击
        $(".collectCon .left li").dblclick(function(){
            var liHtml = $(this).html();
            $(this).addClass("green").siblings("li").removeClass("green");
            $(this).parents(".left").siblings(".right").find("ul").append("<li>"+liHtml+"</li>");
            $(".collectCon .right li").dblclick(function(){
                $(this).remove();
            })
        });


        function stopPropagation(e) {
            var ev = e || window.event;
            if (ev.stopPropagation) {
                ev.stopPropagation();
            }
            else if (window.event) {
                window.event.cancelBubble = true;//兼容IE
            }
        }

        $(".staleConSelBox").click(function (e) {
            $(".staleConSelUl").hide();
            $(this).children(".staleConSelUl").show();
            stopPropagation(e);
        });
        $(document).bind('click', function () {
            $(".staleConSelUl").hide();
        });
        $(".staleConSelUl .one").hover(function () {
            $(this).css({backgroundColor: "#5FB878", color: "#ffffff"})
            $(".staleConSelUl .two").css("color","#333");
            $(this).find("ul").show();
        }, function () {
            $(this).css({backgroundColor: "#fff", color: "#333"})
            $(this).find("ul").hide();
        });
        $(".staleConSelUl .two").hover(function () {
            $(this).css({backgroundColor: "#5FB878", color: "#ffffff"})
        }, function () {
            $(this).css({backgroundColor: "#fff", color: "#333"})
        });
        $(".staleConSelUl .one").click(function (e) {
            $(this).parents(".staleConSelUl").siblings(".staleConSelText").html($(this).html());
            $(this).parents(".staleConSelUl").hide();
            $(".inUl").hide();
            stopPropagation(e);
        })
        $(".staleConSelUl .two").click(function (e) {
            var motherHtml = $(this).parents(".one").html();
            $(this).parents(".staleConSelUl").siblings(".staleConSelText").html(motherHtml+">"+$(this).html());
            $(this).parents(".staleConSelUl").hide();
            $(".inUl").hide();
            stopPropagation(e);
        })
    })
</script>
<script>
    layui.use(['layer','jquery','form','element','util'], function(){
        var layer = layui.layer,form = layui.form,element = layui.element,util = layui.util,$=layui.jquery;
//隐藏
        $(".layui-form-radio").on("click",function(){
            var index = $(this).index();
            if(index==1){
                $(".collectCon").hide();
                $(".submit").hide();
            }else{
                $(".collectCon").show();
                $(".submit").show();
            }
        })
        $(function(){
            //    //遍历渲染 不建议用
            //    $("select.downlist").each(function(index,item) {
            //        var $this=$(this);
            //        var $select=$this.next(".layui-form-select");
            //        $select.addClass("downpanel");
            //        var $dl=$select.find("dl");
            //        $(".layui-select-title input",$select).val($this.attr("placeholder"));
            //        $dl.empty();
            //        var str="";
            //        $("option",$this).each(function() {
            //            str=["<dd>","<input class='sk' type='checkbox' name='brand[",$(this).val(),"]' lay-skin='primary' title='",$(this).text(),"' value='true'>","</dd>"].join("");
            //            $dl.append(str);
            //        });
            //        form.render("checkbox");
            //
            //    });

            $(".downpanel").on("click",".layui-select-title",function(e){
                var $select=$(this).parents(".layui-form-select");
                $(".layui-form-select dl").show();
                $(".layui-form-select").not($select).removeClass("layui-form-selected");
                $select.addClass("layui-form-selected");
                e.stopPropagation();
            }).on("click",".layui-form-checkbox",function(e){
                var id_array=[];
                $("input:checkbox[name='brand']:checked").each(function() {
                    id_array.push($(this).val());//向数组中添加元素
                });
                var idstr=id_array.join(',');//将数组元素连接起来以构建一个字符串
                $(document).bind('click', function () {
                    $("#expert").val(id_array)
                    $(".layui-form-select dl").hide();
                });
                e.stopPropagation();
            });
        });
    });


</script>
</body>

</html>